import React, { useEffect, useState } from "react";
import { ListRawState } from "../../types";
import axios from "axios";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "../../store";
import { fetchList } from "../../store/list/action";
import ListItem from "../../components/listItem";
import { List } from "react-vant";

const Index: React.FC = () => {
  const list = useSelector((state: RootState) => state.list.list);
  const pageCode = useSelector((state: RootState) => state.list.pageCode);
  const pageSize = useSelector((state: RootState) => state.list.pageSize);
  const finished = useSelector((state: RootState) => state.list.finished);
  
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchList({ pageCode, pageSize }) as any)
  }, [])

  if(list.length === 0) {
    return <div>数据加载中...</div>
  }

  return (
    <List finishedText="没有更多数据了～～" onLoad={() => dispatch(fetchList({ pageCode, pageSize }) as any)} finished={finished}>
      {list.map((v, i) => {
        return <ListItem key={i} v={v}></ListItem>;
      })}
    </List>
  );
};

export default Index;
